<template>
	<div class="student">
		<div style="width: 100%;height: 18px;float: left;padding-top: 18px;">
		<i class="el-icon-close close" @click="cancel"></i>
		</div>
		<div class="aa" >
			<router-link to="/home">
			<el-button type="warning" size="small"   style='margin-right: 5px;margin-left: 20px;' icon="el-icon-menu">首页</el-button>
		</router-link>
		<router-link :to="{path:'/home',query: {id:bjid1,frompage:'bjxs'}}">
		<!--<router-link to="/home">-->
         	<el-button type="warning" size="small" 	class="btn" style='margin-right: 5px;margin-left: 0px;'  icon="el-icon-caret-left">返回</el-button>
        </router-link>
         	</div>
        
        <div class="bb" >
         	<div class="search-item">
                <el-input placeholder="按事件名称检索" class="code-search" v-model="vkeyword"  @keyup.enter.native="search" icon="search" ></el-input>
            </div>
             <el-button type="primary" class="add btn" style="border-radius:13px;margin-left: 0;"  @click="search()" icon="el-icon-search"></el-button>
         	</div>
        <!-- 表格区域 -->
		<el-table
	        :data="dataList"
	         stripe
             border
             size="small"
	        align="center"
	        class="table"
	        @select="checkSelect"
	        @select-all="checkall">
	        <div slot='empty'>
	            <img src="../../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
	            <span style="vertical-align: middle;">暂时还没有内容哦!</span>
	        </div>
	        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
	        <el-table-column
	            :prop="v.prop"
	            :label="v.label"
	            v-for="(v,index) in portTitleList"
	            align="center"
	            show-overflow-tooltip
	            v-if="v.hide != 0"
	            :align="v.align || 'center'"
	            :fixed="v.fixed"
	            :formatter="v.formatter"
	            :class-name="v.columnStyle"
	            :width="v.width"
	            :min-width="v.minWidth || '150'"
	            :header-align="v.headerAlign || 'center'"
	            >
	            <template scope="scope">
                    <div slot="reference">
                        <div v-if="scope.column.property == 'zwm'" @click="componentsShow('info',scope)">
                            <img
                            :src="scope.row.xb == '男' ? $store.state.sexImg.boy : $store.state.sexImg.girl"
                            style="width:20px;vertical-align:middle; float: left;"
                            v-if="scope.column.property == 'zwm'">
                            <span style="vertical-align:middle;">{{ scope.row[scope.column.property] }}</span>
                        </div>
                        <span style="vertical-align:middle;" v-else>{{ scope.row[scope.column.property] }}</span>

                    </div>
                </template>
	        </el-table-column>

	        <el-table-column label="操作" width="120px" v-if="false" align="center">
                <template scope="scope">
                	<el-button size="mini" type="success" @click="componentsShow('info',scope)">详情</el-button>
					<!--<el-dropdown>
	                     <el-button type="primary" size="mini"> 更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
						 <el-dropdown-menu slot="dropdown">
						    <el-dropdown-item><el-button size="mini" type="primary" v-if='vzt=="Y"'   @click="componentsShow('change',scope)">转班</el-button></el-dropdown-item>
						    <el-dropdown-item><el-button size="mini" type="danger"  v-if='vzt=="Y"'   @click="componentsShow('xx',scope)">休学</el-button></el-dropdown-item>
						    <el-dropdown-item><el-button size="mini" type="warning" v-if='vzt=="N"'  @click="componentsShow('sx',scope)">上课</el-button></el-dropdown-item>
						 </el-dropdown-menu>
					 </el-dropdown>-->
                	<!--<el-button size="mini" type="primary" v-if='vzt=="Y"'   @click="componentsShow('bujiao',scope)">缴费</el-button>-->
                </template>
            </el-table-column>
	    </el-table>

		<!-- 分页查询区域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageindex"
            :page-sizes="pagesizes"
            :page-size="pagesize"
            :layout="layout"
            :total="total"
            class="class-page">
        </el-pagination>
	</div>
</template>

<script type="text/javascript">
	import qs from 'qs'
	export default {
		props: ['params'],
        components: {
        },
		data () {
			return {
				bjid1:this.$route.query.iid,
				vkeyword:'',
				activeName:'',
				vzt:'Y',
				type:'1',
				dataList: [],
				multipleDelNum: '',
				/*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
                pageindex: 1,//当前分页页码
                pagesizes: [12, 24, 36, 72],//显示个数的选择器选项
                pagesize: 12,//每页显示条目数
                total: 0,//总条数

				portTitleList: [
					{
                        prop:'id',
                        label:'id',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                    {
                        prop:'sjmc',
                        label:'日志事件',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'sj',
                        label:'日志时间',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'120',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'note',
                        label:'说明',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                    {
                        prop:'zcsj',
                        label:'注册时间',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'zsly',
                        label:'招生来源',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'dh',
                        label:'电话',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'fmdh',
                        label:'父母电话',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'wx',
                        label:'微信号',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'jtdz',
                        label:'家庭地址',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'glxx',
                        label:'公立学校',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },{
                        prop:'njmc',
                        label:'年级',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                    {
                        prop:'bq',
                        label:'标签',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                    {
                        prop:'bjmc',
                        label:'班级名称',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    }
				],

                 /*组件区域*/
                portComponents: {
                    singleDelete: {
                        type: 'singleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'single',
                            title: '此操作将删除该班级, 是否继续?'
                        }
                    },
                    multipleDelete: {
                        type: 'multipleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'multiple',
                            title: '此操作将删除您选中的班级, 是否继续?'
                        }
                    },
                },

			}
		},
		created () {
			//权限
	        var logininfo = JSON.parse(localStorage.logininfo) ;
//	        console.log(this.params,'ddddddddddd')
			if(this.params){
				if(this.params.bjid){
					this.bjid1=this.params.bjid;
				}else{
					this.bjid1=this.params.row.id;
				}
			}
			this.search()
		},
		methods: {
			search () {
			  var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
              var params2 = qs.stringify({
                       bjid:this.bjid1,
                       keyword: this.vkeyword,
                       pageindex: this.pageindex,
                       pagesize: this.pagesize,
                       yhid:logininfo.id,
                       xxid:logininfo.xxid
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bj/bjloglist',  params2 )
                 .then(res => {
//               	console.log(res,'sssss')                                                                                                                                          
					if (res.data.code == 1) {
						this.dataList = res.data.data.list;
						this.total = res.data.data.totalPage;
						this.$store.state.loading = false;
					}else{
						this.$store.warning(res.data.msg)
						this.$store.state.loading = false;
					}
                 })
			},

			cancel () {
				if(this.$route.query.iid){
					this.$emit('close',{type:'bjlog',cancel:true})
					this.$router.back(-1)
				}else{
					this.$emit('close',{type:'bjlog',cancel:true})
				}
			},

			handleSizeChange (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.search();
            },
            handleCurrentChange (val) {//分页触发事件
                this.search();
            },
            checkSelect (selection, row) {//点击单选select触发事件
                let strID = [];
                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },
            checkall (selection) {//点击全选select触发事件
                let strID = [];

                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },
            /* 组件的弹框  */
            componentsShow (type,data) { //显示组件
//              console.log(type,data)
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {
						
                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;
						
                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.row.id

                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;

                        }else if(this.portComponents[i].type == 'test'){
                            this.portComponents[i].data.distinction  = "test";

                        }else if(this.portComponents[i].type == 'score'){
                            this.portComponents[i].data.distinction  = "score";

                        }else{
                            return;
                        }
                        return;
                    }
                }

            },
            componentsHide (setting) { //关闭组件
                this.search();
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = false;
                        if (!setting.cancel) {
                           this.search();
                        }
                        return;
                    }
                }
            }


		},
		computed: {
//			multipleDeleteDisabled () {
//              console.log(this.multipleDelNum)
//              if (this.multipleDelNum) {
//                  return false;
//              }else{
//                  return true
//              }
//          }
		}
	}
</script>

<style lang="less" scope>

	.student {
		position: absolute;
		top:100px;left:0;
		width: 100%;
		height:100%;
		background: #E8EDF0;
		z-index: 99;
	}
	.wrap {
		text-align: left;
	}
	h2 {
		line-height: 40px;
	}
	.aa{
		width: 30%;
		height: 50px;
		float: left;
	}
	.bb{
		width: 65%;
		height: 50px;
		margin-right: 40px;
		float: right;
		text-align: right;
	}
	.btn {
            height: 30px;
            padding:0 10px;
            margin-left: 0;
        }
	.code-search {
            max-width: 130px;
            min-width: 100px;
            text-align: center;
            height: 50px;
            /*line-height: 50px;*/
            font-size: 12px;
        }
         .search-item {
            display: inline-block;
        }

	.table {
		width: 95%;
		margin-top:15px;
		margin-left: 20px;
	}

	.btn {
		text-align: center;
		margin-left: 20px;
		 margin-top: 10px;
	}

	.submit {
		width: 120px;
	}
</style>
